<template>
  <div class="basic-business">
    <el-row :gutter="15">
      <el-form
        disabled
        ref="elForm"
        :model="formData"
        size="small"
        label-width="126px"
      >
        <el-col :span="24" style="margin-bottom: 8px; font-weight: bold">
          基本情况
        </el-col>
        <el-col :span="12">
          <el-form-item label="商机编码" prop="code">
            <el-input
              v-model="formData.code"
              placeholder="请输入商机编码"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名称" prop="custormer">
            <el-input
              v-model="formData.custormer"
              placeholder="请输入客户名称"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="原客户名称" prop="originalCustormer">
            <el-input
              v-model="formData.originalCustormer"
              placeholder="请输入原客户名称"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目名称" prop="projectName">
            <el-input
              v-model="formData.projectName"
              placeholder="请输入项目名称"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="投标时间" prop="biddingTime">
            <el-date-picker
              v-model="formData.biddingTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择投标时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目简介" prop="projectDesc">
            <el-input
              v-model="formData.projectDesc"
              type="textarea"
              placeholder="请输入项目简介"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商机来源" prop="source">
            <el-select
              v-model="formData.source"
              placeholder="请输入商机来源"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in sourceOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商机阶段" prop="stage">
            <el-select
              v-model="formData.stage"
              placeholder="请选择商机阶段"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in stageOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目预算情况" prop="budget">
            <el-select
              v-model="formData.budget"
              placeholder="请选择项目预算情况"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in budgetOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="竞争态势" prop="swot">
            <el-select
              v-model="formData.swot"
              placeholder="请选择竞争态势"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in swotOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目预算(万元)" prop="budgetFund">
            <el-select
              v-model="formData.budgetFund"
              placeholder="请选择项目预算(万元)"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in budgetFundOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24" style="margin-bottom: 8px; font-weight: bold">
          客情关系
        </el-col>

        <el-col :span="12">
          <el-row :gutter="15"> </el-row>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户关键人" prop="custormerKeyPerson">
            <el-input
              v-model="formData.custormerKeyPerson"
              placeholder="请输入客户关键人"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关键人职务" prop="keyPersonJob">
            <el-input
              v-model="formData.keyPersonJob"
              placeholder="请输入关键人职务"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关键人电话" prop="keyPersonPhone">
            <el-input
              v-model="formData.keyPersonPhone"
              placeholder="请输入关键人电话"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目决策人" prop="projectMaker">
            <el-input
              v-model="formData.projectMaker"
              placeholder="请输入项目决策人"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="决策人职务" prop="projectMakerJob">
            <el-input
              v-model="formData.projectMakerJob"
              placeholder="请输入决策人职务"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="高层沟通情况" prop="relation">
            <el-select
              v-model="formData.relation"
              placeholder="请输入高层沟通情况"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in relationOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="margin-bottom: 8px; font-weight: bold">
          历史交易
        </el-col>
        <el-col :span="24">
          <el-form-item label="交易历史" prop="historyTransaction">
            <el-select
              v-model="formData.historyTransaction"
              placeholder="请输入交易历史"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in historyTransactionOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { businessDetail } from "@/api/business/index";
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        code: "",
        custormer: undefined,
        originalCustormer: undefined,
        projectName: undefined,
        biddingTime: null,
        projectDesc: undefined,
        source: undefined,
        stage: undefined,
        budget: undefined,
        swot: undefined,
        budgetFund: undefined,
        custormerKeyPerson: undefined,
        keyPersonJob: undefined,
        keyPersonPhone: undefined,
        projectMaker: undefined,
        projectMakerJob: undefined,
        relation: undefined,
        historyTransaction: undefined,
      },
      sourceOptions: [
        {
          label: "直接从客户挖掘的商机",
          value: 1,
        },
        {
          label: "从合作伙伴获得的商机",
          value: 2,
        },
        {
          label: "公开招标的商机",
          value: 3,
        },
        {
          label: "其他渠道",
          value: 4,
        },
      ],
      stageOptions: [
        {
          label: "规划阶段",
          value: 1,
        },
        {
          label: "调研阶段",
          value: 2,
        },
        {
          label: "设计阶段",
          value: 4,
        },
        {
          label: "立项阶段",
          value: 5,
        },
        {
          label: "招投标阶段",
          value: 6,
        },
      ],
      budgetOptions: [
        {
          label: "预算已确定（财政拨款）",
          value: 1,
        },
        {
          label: "预算已确定（单位自筹）",
          value: 2,
        },
        {
          label: "已有初步预算",
          value: 3,
        },
        {
          label: "预算尚不明确",
          value: 4,
        },
        {
          label: "无预算",
          value: 5,
        },
      ],
      swotOptions: [
        {
          label: "领先（主导）",
          value: 1,
        },
        {
          label: "竞争（均衡）",
          value: 2,
        },
        {
          label: "劣势（冲标）",
          value: 3,
        },
        {
          label: "不明确",
          value: 4,
        },
      ],
      budgetFundOptions: [
        {
          label: "未确定",
          value: 1,
        },
        {
          label: "10万以下",
          value: 2,
        },
        {
          label: "10-50万",
          value: 3,
        },
        {
          label: "50-100万",
          value: 4,
        },
        {
          label: "100-300万",
          value: 5,
        },
        {
          label: "300-500万",
          value: 6,
        },
        {
          label: "500-1000万",
          value: 7,
        },
        {
          label: "1000万以上",
          value: 8,
        },
      ],
      relationOptions: [
        {
          label: "空",
          value: 1,
        },
        {
          label: "公司领导拜访",
          value: 2,
        },
        {
          label: "部门/区县经理拜访",
          value: 3,
        },
      ],
      historyTransactionOptions: [
        {
          label: "一期为我方承建且超300万",
          value: 1,
        },
        {
          label: "一期为我方承建且未到300万",
          value: 2,
        },
        {
          label: "历史项目超过300万",
          value: 3,
        },
        {
          label: "历史项目未超过300万",
          value: 4,
        },
        {
          label: "无历史项目",
          value: 5,
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    loadData(id) {
      return new Promise((resolve, reject) => {
        businessDetail(id).then((res) => {
          this.formData = res.data;
          resolve(this.formData);
        });
      });
    },
  },
};
</script>
<style lang="scss">
.basic-business {
  padding: 10px 20px;
}
</style>
